<template>
    <div>
        <div class="head">
            <span>订单管理 > 维权订单</span>
        </div>
        <div class="searchFor">
            <div class="searchItem">
                <span>订单搜索</span>
                <el-select v-model="searchForm.searchType" class="m-2" placeholder="Select" :style="{ width: '125px' }">
                    <el-option v-for="item in searchOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-input v-model="searchForm.input" :style="{ width: '180px' }" />
            </div>
            <div class="searchItem">
                <span>支付方式</span>
                <el-select v-model="searchForm.payType" class="m-2" placeholder="Select" :style="{ width: '125px' }">
                    <el-option v-for="item in payOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="searchItem">
                <span>售后类型</span>
                <el-select v-model="searchForm.saledType" class="m-2" placeholder="Select" :style="{ width: '125px' }">
                    <el-option v-for="item in saledOptions" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
            </div>
            <div class="searchItem">
                <span>下单时间</span>
                <el-date-picker v-model="searchForm.startDates" type="date" :style="{ width: '120px' }"
                    :disabled-date="disabledDate" />
                &nbsp;至&nbsp;
                <el-date-picker v-model="searchForm.endDates" type="date" :style="{ width: '120px' }"
                    :disabled-date="disabledDate" />

            </div>
            <div class="searchItem">
                <el-button color="#ed742f" :dark="false" style="color:#fff">筛选</el-button>
                <el-button link color="#ed742f" :dark="true" style="color:#ed742f ;">清除</el-button>
            </div>
            
        </div>

        <div class="tb">
            <div class="tbHead">
                <div style="width: 30%;">商品</div>
                <div style="width: 12%;">单价/数量</div>
                <div style="width: 18%;">收货信息</div>
                <div style="width: 10%;">实付金额</div>
                <div style="width: 8%;">支付方式</div>
                <div style="width: 7%;">订单状态</div>
                <div style="width: 15%;">操作</div>
            </div>

            <div class="tbItem">
                <div class="itemTop">
                    <span>订单号：{{ "xxxxxxxxxxxxxxxx" }}
                    </span>
                    <span>下单时间：{{ new Date().toLocaleString() }}</span>
                </div>
                <div class="itemContent">
                <div class="item" style="width: 30%;">商品</div>
                <div class="item" style="width: 12%;">单价/数量</div>
                <div class="item" style="width: 18%;">收货信息</div>
                <div class="item" style="width: 10%;">实付金额</div>
                <div class="item" style="width: 8%;">支付方式</div>
                <div class="item" style="width: 7%;">订单状态</div>
                <div class="item caozuo" style="width: 15%;">
                    <div>
                        <el-button link :dark="true" style="color:#ed742f ;">修改价格</el-button>
                    </div>
                    
                    <div>
                        <el-button link :dark="true" style="color:#ed742f ;">取消订单</el-button>
                    </div>
                    <div>
                        <el-button link :dark="true" style="color:#ed742f ;">发货</el-button>
                    </div>
                    <div>
                        <el-button link :dark="true" style="color:#ed742f ;">订单详情</el-button>
                    </div>
                    
                    
                </div>
                </div>
            </div>
        </div>

        <div class="pagination">
            <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      background
      layout="prev, pager, next, jumper"
      :total="100"
      @current-change="currentChange"
    />
        </div>



    </div>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue';
const searchForm = reactive({
    searchType: "",
    input: "",
    payType:"",
    saledType:"",
    startDates: "",
    endDates: "",

})
const currentPage = ref(1)
const pageSize = ref(5)
const currentChange=(current:any)=>{
    currentPage.value = current
}
const disabledDate = (time: Date) => {
    return time.getTime() > Date.now()
}

const payOptions = [
    {
        value: "",
        label:"全部"
    },
    {
        value: "ali",
        label: "支付宝"
    },
    {
        value: "wx",
        label: "微信"
    },
]
const saledOptions = [
{
        value: "",
        label:"全部"
    },
    {
        value: "ali",
        label: "仅退款"
    },
    {
        value: "wx",
        label: "退货退款"
    },
    {
        value: "wx",
        label: "换货"
    },
]

const searchOptions = [
    {
        value: "",
        label: "订单号"
    },
    {
        value: "proName",
        label: "商品名称"
    },
    {
        value: "nickName",
        label: "买家昵称"
    },
    {
        value: "tel",
        label: "买家手机号"
    },
    {
        value: "addrName",
        label: "收货人姓名"
    },
    {
        value: "proNo",
        label: "商品货号"
    },
    {
        value: "addrTel",
        label: "收货人手机号"
    }
]
</script>

<style scoped lang="less">
.head{
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    border-radius: 5px;
    background-color: white;
    span{
        margin-left: 10px;
        line-height: 40px;
        font-size: 14px;
    }
}
.searchFor{

    width: 100%;
    height:130px;
    background-color: white;
    border-radius: 5px;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    color: #2c2c2c;
    font-size:16px;
    margin-bottom: 20px;
    .searchItem{
        span{
            margin-right: 15px;
        }
        margin-left: 20px;
        width: 400px;
        display: flex;
        justify-content: start;
        align-items: center;
    }
    
}
.tb{
        width: 100%;
        background-color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .tbHead{
            margin: 20px 0;
            height: 50px;
            width: 99%;
            display: flex;
            background-color: #f2f2f2;
            div{
                font-size:14px;
            font-weight: 600;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        }
        .tbItem{
            width: 99%;
            height: 175px;
            box-shadow:5px 5px 7px 0px #acabab ;
            .itemTop{
                font-size: 12px;
                width: 100%;
                height: 35px;
                background-color: #f2f2f2;
                display: flex;
                align-items: end;
                span{
                    margin: 0 0 5px 20px;
                }
            }
            .itemContent{
                width: 100%;
                height: 140px;
                display: flex;
                .item{
                    display: flex;
                justify-content: center;
                align-items: center;
                box-sizing: content-box;
                border-left: 1px solid #f2f2f2;
                
                }
                .caozuo{
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    align-items: center;
                }
            }

        }
    }
    .pagination{
        margin: 25px;
        display: flex;
        justify-content: end;
    }
</style>